<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 示例1</title>
  <style>
    .title {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1 class="test abc" :class="[{title: seen}, 'a', 'b']" :style="">{{title}}</h1>
    <h2>{{reverseTitle}}</h2>
    <h2>{{reverseTitle}}</h2>
    <h4>{{anotherReverseTitle()}}</h4>
    <template v-if="seen">
      <span>span_1</span>
      <div>div_1</div>
      <p>p_1</p>
    </template>

    <ul>
      <li v-for="item in array" v-bind:key="item.id">{{item.title}}</li>
    </ul>

    <button @click="clk('快下课了')">点击，修改 title</button>

    <input type="text" v-model="title">

    <!-- v-model 原理 -->
    <input type="text" :value="msg" @input="inputChangeHandler" > {{msg}}
  </div>
  
  <script src="./libs/vue.js"></script>
  <script>
    // 在创建 Vue 实例时，会自动将 data 选项中绑定的数组挂载到 Vue 实例对象下
    // 如果在 data 选项中有以 _ 或 $ 开头的属性，不会挂载
    // Vue 实例会提供一个名为 $data 的属性，指向 data 选项
    const vm = new Vue({
      el: '#app',
      // 数据
      data: {
        title: '这是一个标题',
        $message: '消息',
        seen: false,
        msg: '单元格文本',
        // array: [
        //   "test1", "abc", "37"
        // ]
        array: [
          {id: 1, title: 'testabc'},
          {id: 2, title: 'abc'},
          {id: 3, title: '123'},
        ]
      },
      // 计算属性
      computed: {
        reverseTitle() {
          // getter
          return this.title.split('').reverse().join('')
        }
      },
      // 方法
      methods: {
        anotherReverseTitle() {
          return this.title.split('').reverse().join('')
        },
        clk(msg) {
          this.title = '修改后的标题: ' + msg
        },
        inputChangeHandler(e) {
          console.log(e.target.value)
          this.msg = e.target.value
        }
      }
    })
  </script>
</body>
</html>